<template>
  <div class="Coupon_container">
    <div class="nav">
      <h3 style="padding: 10px 0px 0px 10px;">优惠券管理</h3>
    </div>
    <div style="clear:both;"></div>
    <Card class="search_box" style="padding-bottom:2vh;">
      <Form :model="formItem" :label-width="80" ref="formItem" :rules="ruleValidate">
        <Row>
          <Col span="10">
            <FormItem label="优惠券名称" prop="equityname">
              <Input v-model="formItem.name" placeholder="优惠券名称" style="width:200px;"></Input>
            </FormItem>
          </Col>
          <Col span="10">
            <FormItem label="优惠券模板编号" prop="Coupontemplatenum" :label-width="120">
              <Input v-model="formItem.code" placeholder="请输入优惠券模板编号" style="width:200px;"></Input>
            </FormItem>
          </Col>
          <Col span="2">
            <Button type="primary" @click="searchcouponlist">查询</Button>
          </Col>
        </Row>
      </Form>
    </Card>
    <Card style="margin-top:2vh;">
      <Table width="550" border :columns="columns" :data="couponList" style="width:100%"></Table>
      <Row type="flex" justify="center" style="margin-top:2vh;">
        <Col>
          <Page
            :id="pageId"
            :total="coupontotal"
            show-total
            show-sizer
            show-elevator
            @on-change="changeCurrentcoupon"
            @on-page-size-change="changePageSize"
          ></Page>
        </Col>
        <Col push="1">
          <Button type="primary" @click="goElevatorPage(pageId)">跳转</Button>
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
import { fetchmarketcouponList } from "@/api/coupon";
export default {
  name: "Couponmanagement",
  data() {
    const validateNumber = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字"));
      } else {
        if (value % 1 != 0) {
          callback(new Error("请输入整数"));
        } else {
          callback();
        }
      }
    };
    return {
      pageId:"targetPage", //跳转
      formItem: {
        name: "",
        code: ""
      },
      couponList: [], // 优惠券列表
      coupontotal: 1,
      total: 0, //总条数
      pageNum: 1, //开始条数
      pageSize: 10, //每页记录数
      page: 1,
      ruleValidate: {
        // Coupontemplatenum: [
        //   { type: "number", trigger: "blur", validator: validateNumber }
        // ]
      },

      columns: [
        {
          key: "code",
          width: 140,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "ios-keypad-outline"
                },
                style: {
                  marginRight: "5px"
                }
              }),
              h("strong", "优惠券模板编号")
            ]);
          }
        },
        {
          key: "name",
          width: 120,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "ios-nutrition"
                },
                style: {
                  marginRight: "5px"
                }
              }),
              h("strong", "优惠券名称")
            ]);
          }
        },
        {
          key: "totalCount",
          width: 110,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "ios-medical"
                },
                style: {
                  marginRight: "5px"
                }
              }),
              h("strong", "券派发量")
            ]);
          }
        },
        {
          key: "limitTimes",
          width: 120,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "ios-medical"
                },
                style: {
                  marginRight: "5px"
                }
              }),
              h("strong", "限领张数")
            ]);
          }
        },
        {
          key: "totalUseCount",
          width: 120,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "ios-medical"
                },
                style: {
                  marginRight: "5px"
                }
              }),
              h("strong", "使用张数")
            ]);
          }
        },
        {
          key: "status",
          align: "center",
          width: 120,
          render: (h, params) => {
            const type = params.row.status === 1 ? "success" : "error";
            let _this = this;
            let text = "";
            let color = "";
            if (params.row.status == 1) {
              text = "上线";
              color = "lightgreen";
            } else if (params.row.status == 0) {
              text = "下线";
              color = "red";
            }
            const row = params.row;
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color
                }
              },
              text
            );
          },
          renderHeader: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "ios-pulse"
                },
                style: {
                  marginRight: "5px"
                }
              }),
              h("strong", "活动状态")
            ]);
          }
        },
        {
          key: "beginDate",
          width: 160,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "ios-time"
                },
                style: {
                  marginRight: "5px"
                }
              }),
              h("strong", "活动开始时间")
            ]);
          },
          render: (h, params) => {
            return h('div', this.changeDate(this.couponList[params.index].beginDate));
          }
        },
        {
          key: "endDate",
          width: 160,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "ios-time"
                },
                style: {
                  marginRight: "5px"
                }
              }),
              h("strong", "活动结束时间")
            ]);
          },
          render: (h, params) => {
            return h('div', this.changeDate(this.couponList[params.index].endDate));
          }
        },
        {
          key: "createDate",
          width: 160,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "ios-time"
                },
                style: {
                  marginRight: "5px"
                }
              }),
              h("strong", "创建时间")
            ]);
          },
          render: (h, params) => {
            return h('div', this.changeDate(this.couponList[params.index].createDate));
          }
        },
        {
          key: "createBy",
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "md-person"
                },
                style: {
                  marginRight: "5px"
                }
              }),
              h("strong", "创建者")
            ]);
          }
        },
      ],
    };
  },
  created() {
    this.FetchmarketcouponList();
  },
  methods: {
    searchcouponlist(){
      this.FetchmarketcouponList(this.params)
    },
    FetchmarketcouponList(params) {
      this.TableLoading = true;
      var reqParams = {
        page: this.page,
        limit: this.pageSize,
        name:this.formItem.name,
        code:this.formItem.code,
      };
      fetchmarketcouponList(reqParams).then(res => {
          this.TableLoading = false;
          if (res.data.code == 200) {
            this.couponList = res.data.data.records;
            this.pageSize = res.data.data.size;
            this.page = res.data.data.pages;
            this.coupontotal = res.data.data.total;
          }
        })
        .catch(error => {
          this.$Message.error("查询失败【" + error + "】");
        });
    },
    changeCurrentcoupon(current) {
      //切换优惠券列表
      this.page = 1;
      this.page = current;
      this.FetchmarketcouponList();
    },
    //分页
    changePageSize(val) {
      this.page = 1;
      this.pageSize = val;
      this.Fetchmarketgrouplist();
    },
    changeDate(value) {
      var dateee = new Date(value).toJSON();
      var date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
      return date;
    },
    goElevatorPage(pageId){  // 跳转按钮
      var evtObj;
      var thisPage=document.getElementById(pageId);
      var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
      if(elevatorDiv && elevatorDiv.length>0){
        var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {//firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents');
          evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
        } else {//chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents');
          evtObj.initUIEvent("keyup", true, true, window, 1);
          delete evtObj.keyCode;
          if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
            Object.defineProperty(evtObj, "keyCode", { value: 13 });
          } else {
            evtObj.key = String.fromCharCode(13);
          }
        }
        pageInput.dispatchEvent(evtObj);
      }
    },
  },
  
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.Coupon_container {
  @include container_global;
  @include margin_global;
  .nav {
    font-size: 0.9rem;
    line-height: 5px;
    float: left;
    margin-bottom: 2vh;
    position: relative;
  }
  .search_box {
  }
}
</style>
